import * as THREE from 'three'
import {
  addPointLineKeypoint,
  addPointsLineInstance,
  extractPointsLineInstance,
  addLine,
  removeLine,
  removePoint,
} from '../utils/AnnotationsLoader'

const toolColor = 0xff00ff
const toolPointSize = 8

const _self = {
  scene: null,
  camera: null,
  controls: null,
  renderer: null,
  labelRenderer: null,
  track: null,
  mouse: {
    x: null,
    y: null,
  },
  annotations: {
    points: null,
  },
  insertPoint: null,
  //   updatePoint: null,
  tmpLinePoints: [],
  //   positionUpdatePoint: null,
  tmpLines: [],
  //   selectedLine: null,
  //   currentLineInstance: {
  //     mMarkAnnotationId: null,
  //   },
  startAnnotation: false,
  polygon: [],
  canvasMouse: null,
  contextMouse: null,
  activated: false,
  animate: null,
}

const onMouseDown = (event) => {
  const rect = _self.renderer.domElement.getBoundingClientRect()
  const x = ((event.clientX - rect.left) / rect.width) * 2 - 1
  const y = -((event.clientY - rect.top) / rect.height) * 2 + 1
  _self.polygon.push([x, y])
}

const onMouseDrag = (event) => {}

const onMouseUp = (event) => {}

const onMouseMove = (event) => {}

const onKeyDown = (event) => {}

const onToggleIn = (params) => {
  _self.scene = params.scene
  _self.camera = params.camera
  _self.controls = params.controls
  _self.renderer = params.renderer
  _self.labelRenderer = params.labelRenderer
  _self.track = params.track

  _self.raycaster = new THREE.Raycaster()
  _self.raycaster.params.Points.threshold = 0.1
  _self.raycaster.linePrecision = 0.1
  _self.raycaster.INTERSECTED = null

  _self.controls.keys = {
    LEFT: 65,
    UP: 87,
    RIGHT: 68,
    BOTTOM: 83,
  }

  _self.controls.enableKeys = true

  //   _self.canvasMouse = $('#canvasMouse').get(0)
  _self.canvasMouse = document.getElementById('canvasMouse')
  _self.contextMouse = _self.canvasMouse.getContext('2d')
  // _self.activated = true
  // _self.animate = () => {
  //   if (_self.activated) requestAnimationFrame(_self.animate)
  //   drawPolyLine(_self.contextMouse, _self.polygon, 'yellow')
  // }
  // _self.animate()
  document.getElementById('poly-split-manipulator').style.display = 'inline-flex'
}

const onToggleOut = (event) => {
  _self.activated = false
}
const reset = (event) => {}
const controlsChange = (event) => {}

function drawPolyLine(context, pts, color, xField = 0, yField = 1, close) {
  if (!pts || !pts.length) return
  context.beginPath()
  context.lineWidth = 10
  context.strokeStyle = color
  context.moveTo(pts[0][xField], pts[0][yField])
  for (let i = 1; i < pts.length; i++) {
    context.lineTo(pts[i][xField], pts[i][yField])
    console.log(pts[i][xField], pts[i][yField])
  }
  if (close) context.lineTo(pts[0][xField], pts[0][yField])
  context.stroke()
}

export const tool = {
  name: 'polySplit',
  onMouseDown: onMouseDown,
  onMouseDrag: onMouseDrag,
  onMouseUp: onMouseUp,
  onMouseMove: onMouseMove,
  onToggleIn: onToggleIn,
  onToggleOut: onToggleOut,
  reset: reset,
  controlsChange: controlsChange,
}
